<template>
    <div class="main-box" v-loading="loading" style="margin-top: 20px;">
		<div class="dl-row mar-bottom-20">
			<div class="search-box" style="margin-right: 20px">
				<el-input
						placeholder="请输入考试/竞赛名称"
						prefix-icon="el-icon-search"
						v-model="inputSearch">
				</el-input>
			</div>
			<el-button type="success" round size="small" @click="init()">搜索</el-button>
		</div>
		<div v-if="data.length>0" >
			<div class="em-history-box border-main mar-bottom-20" v-for="(record,index) in data"
				 :key="index">
				<div class="title dl-row center">
					<h1>{{record.checkName}}</h1>
					<span>完成时间：{{record.resRank.checkUserRecord.endTime}}</span>
				</div>
				<div class="dl-row-sb">
					<div>
						<ul class="em-score">
							<li>{{record.resRank.checkUserRecord.source}}分</li>
							<li>{{record.resRank.manRank}}名</li>
						</ul>
					</div>
					<div>
						<el-button type="primary" plain round @click="routeClick(record.id)">查看详情</el-button>
						<el-button type="primary" plain round @click="record.show=true">查看排名</el-button>
						<el-button type="primary" plain round @click="record.show=false">收起</el-button>
					</div>
				</div>
				<transition name="el-fade-in-linear">
					<div class="ranking-box mar-top-20" v-show="record.show">
						<div class="top dl-row">
							<div class="number">排名</div>
							<div class="name">姓名</div>
							<div class="user-score">得分</div>
						</div>
						<ul class="score-main" style="overflow:auto">
							<li class="dl-row center"
								v-for="(rank,rankIndex) in record.resRank.pagination.records"
								:key="rankIndex">
								<div class="number first">
									<img :src="firstImg" v-if="rankIndex===0">
									<img :src="secondImg" v-else-if="rankIndex===1">
									<img :src="thirdImg" v-else-if="rankIndex===2">
									<p v-else>{{rank.rank}}</p>
								</div>
								<div class="name dl-row center">
									<img :src="rank.userHeadPortrait?rank.userHeadPortrait:userImg" style="border-radius: 50%;">
									<!-- <el-avatar :size="40" :src="rank.userHeadPortrait?rank.userHeadPortrait:userImg"></el-avatar> -->
									<h1>{{rank.userName}}</h1>
									<p>{{rank.userDept}}</p>
								</div>
								<div class="user-score">{{rank.source}}</div>
							</li>
							<el-button type="warning" size="mini"
									   v-if="record.resRank.pagination.current*record.resRank.pagination.size < record.resRank.pagination.total"
									   @click="loadMore(record.id,record.resRank)"
									   style="display: block;margin: auto;">点击加载更多
							</el-button>
							<el-button disabled size="mini" style="display: block;margin: auto;" v-else>没有更多了
							</el-button>
						</ul>
					</div>
				</transition>
			</div>
			<el-pagination
					:total="total"
					:current-page="page + 1"
					style="margin-top: 8px;"
					layout="total, prev, pager, next, sizes"
					@size-change="sizeChange"
					@current-change="pageChange"/>
		</div>
		<div v-if="data.length==0 &&!loading">
			<el-empty class="empty" style="height: 300px;" description="无考试记录"></el-empty>
		</div>
    </div>
</template>

<script>
    import initData from '@/mixins/initData'
    import {getRank} from '@/api/check'

    export default {
		loading:false,
        name: "collect",
        mixins: [initData],
        data() {
            return {
                userImg: require('../../../assets/image/u353.png'),
                firstImg: require('../../../assets/image/first.png'),
                secondImg: require('../../../assets/image/second.png'),
                thirdImg: require('../../../assets/image/third.png'),
                type: 1,
				inputSearch:""
            }
        },
        methods: {
            beforeInit() {
                this.url = 'check/user/exam'
                this.params = {page: this.page, size: this.size, type: this.type,inputSearch:this.inputSearch}
                return true
            },
            loadMore(checkId, resRank) {
                const params = {
                    checkId: checkId,
                    page: resRank.pagination.current,
                    size: resRank.pagination.size
                }
                getRank(params).then(res => {
                    resRank.pagination.current = res.pagination.current
                    resRank.pagination.size = res.pagination.size
                    resRank.pagination.total = res.pagination.total
                    resRank.pagination.records = resRank.pagination.records.concat(res.pagination.records)
                })
            },
            routeClick(id) {
                this.$router.push({
                    path: "/exam/examDetails",
                    query: {id: id}
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .class-box {
        .left {
            width: 230px;
            padding: 25px 0;

            .bg-blue-500 {
                background: #0068B6;
            }

            .py-3 {
                margin-bottom: 5px;
            }

            span {
                font-size: 16px;
                font-weight: 400;
                color: #545C63;
            }

            .text-white span {
                color: #ffffff;
            }
        }

        .right {
            width: 1110px;
        }
    }

    .calendar-box {
        .calendar {
            width: 440px;
        }
    ;

        .calendar-right {
            width: 570px;

            .title {
                margin-bottom: 15px;

                h5 {
                    font-size: 18px;
                    font-weight: bold;
                    color: #333333;
                    margin-right: 20px;
                }

                p {
                    font-size: 18px;
                    color: #333333;
                }
            }

        }
    ;
    }

    .calendar-item {
        background: #FFF5F3;
        border-radius: 10px 10px 10px 10px;
        padding: 15px;
        margin-bottom: 15px;

        h1 {
            font-size: 18px;
            font-weight: bold;
            color: #F45333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 8px;
            width: 80%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .time {
            font-size: 12px;
            font-weight: 400;
            color: #545C63;
            line-height: 14px;

            span {
                margin-right: 15px;
            }
        }
    }

    .em-history-box {
        .title {
            margin-bottom: 15px;

            h1 {
                font-size: 18px;
                font-weight: bold;
                color: #333333;
                margin-right: 20px;
            }

            span {
                font-size: 12px;
                color: #999999;
            }
        }
    }
</style>
